<template>
  <view class="apartment-card" @tap="handleCardClick(apartmentData)">
    <view class="apartment-type">
      {{ apartment.typeName }}
    </view>
    <view class="apartment-content">
      <view class="apartment-content-img">
        <img class="house-img" :src="apartment.realisticPicture" alt="">
      </view>
      <view class="content">
        <view class="content-house-name">
          <h5>{{ apartment.houseName }}</h5>
        </view>
        <view class="content-price">
          {{ apartment.price }}
        </view>
        <view class="content-remarks">
          {{ apartment.remarkBig }}
        </view>
        <view class="content-area">
          {{ apartment.area }}
        </view>
        <view class="content-remark">
          {{ apartment.remark }}
        </view>
        <view class="content-link">
          点击查看详情
        </view>
      </view>
    </view>
  </view>
</template>
<script setup>
import {defineProps, onMounted, reactive, defineEmits} from 'vue'

const props = defineProps({
  apartmentData: {
    type: Object,
    default: () => {
    }
  }
})
let apartment = reactive({
  typeName: '',
  realisticPicture: '',
  houseName: '',
  smallHouseAlias: '',
  houseSlogan: '',
  desc: '',
  price: '',
  area: '',
  remark: '',
  remarkBig: ''
})

const emits = defineEmits(['handleCardClickEmit'])
const handleCardClick = apartmentData => {
  emits('handleCardClickEmit', apartmentData)
}

/**
 * 重构公寓数据
 */
const setApartmentData = () => {
  const {apartmentData} = props || {}
  const {bigHouseTypeName, habitability, smallHouseAlias, title, detail, price, area, remark, realisticePictureList, remarkBig} = apartmentData || {}
  apartment.typeName = bigHouseTypeName
  apartment.realisticPicture = realisticePictureList[0]
  apartment.houseName = `${bigHouseTypeName}(可居住:${habitability})`
  apartment.houseSlogan = title
  apartment.smallHouseAlias = smallHouseAlias
  apartment.desc = detail
  apartment.price = price
  apartment.area = area
  apartment.remark = remark
  apartment.remarkBig = remarkBig
}

onMounted(() => {
  setApartmentData()
})
</script>
<style scoped lang=less>
@import '@/package_kuafu_apartment/pages/home/components/apartment-card/style/apartment-card.less';
</style>
